<template>
	<div>
		<div class="fd-nav" >
			<div class="fd-nav-left">
				<div class="fd-nav-back" @click="toReturn"><i class="anticon anticon-left"></i></div>
				<div class="fd-nav-title">{{flowName}}</div>
			</div>
			<div class="fd-nav-right">
				<button type="button" v-loading.fullscreen.lock="fullscreenLoading" class="ant-btn button-publish" @click="saveSet" ><span>保 存</span></button>
			</div>
		</div>
		<div class="fd-nav-content">
			<section class="dingflow-design">
				<div class="zoom">
					<div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
					<span>{{nowVal}}%</span>
					<div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
				</div>
				<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
					<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"
						:isTried.sync="isTried" :directorMaxLevel="directorMaxLevel" :tableId="tableId"></nodeWrap>
					<div class="end-node">
						<div class="end-node-circle"></div>
						<div class="end-node-text">流程结束</div>
					</div>
				</div>
			</section>
		</div>
		<el-dialog title="提示" :visible.sync="tipVisible" width="30%">
			<div class="ant-confirm-body">
				<i class="anticon anticon-close-circle" style="color: #f00;"></i>
				<span class="ant-confirm-title">当前无法发布</span>
				<div class="ant-confirm-content">
					<div>
						<p class="error-modal-desc">以下内容不完善，需进行修改</p>
						<div class="error-modal-list">
							<div class="error-modal-item" v-for="(item,index) in tipList" :key="index">
								<div class="error-modal-item-label">流程设计</div>
								<div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="tipVisible = false">我知道了</el-button>
				<el-button type="primary" @click="tipVisible = false">前往修改</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
  import {addFlow,getFlow} from '@/api/approval/flow'
  export default {
  name:"setting",
	data() {
		return {
			isTried: false,
      fullscreenLoading:false,
			tipList: [],
			tipVisible: false,
			nowVal: 100,
			processConfig: {},
			nodeConfig: {},
      flowName:"",
			flowPermission: [],
			directorMaxLevel: 0,
			dialogVisible: true,
			tableId: "",
		};
	},
	created() {
    this.processConfig = this.$route.params.data
    if (this.processConfig.flowId===0){
      this.tableId = this.processConfig.id;
      this.flowName = this.processConfig.flowName;
      this.directorMaxLevel = this.processConfig.directorMaxLevel;
      this.flowPermission = this.processConfig.flowPermission;
      this.nodeConfig =this.processConfig.nodeConfig;
    }else{
      getFlow(this.processConfig).then(res=>{
        this.processConfig = res
        this.tableId = this.processConfig.id;
        this.flowName = this.processConfig.flowName;
        this.directorMaxLevel = this.processConfig.directorMaxLevel;
        this.flowPermission = this.processConfig.flowPermission;
        this.nodeConfig =this.processConfig.nodeConfig;
      })
    }
	},
	methods: {
		toReturn() {
			window.location.href = "/approval/basicinfo"
		},
		reErr(data) {
			if (data.childNode) {
				if (data.childNode.type == 1) {//审批人
					if (data.childNode.error) {
						this.tipList.push({ name: data.childNode.nodeName, type: "审核人" })
					}
					this.reErr(data.childNode)
				} else if (data.childNode.type == 2) {
					if (data.childNode.error) {
						this.tipList.push({ name: data.childNode.nodeName, type: "抄送人" })
					}
					this.reErr(data.childNode)
				} else if (data.childNode.type == 3) {
					this.reErr(data.childNode.childNode)
				} else if (data.childNode.type == 4) {
					this.reErr(data.childNode)
					for (var i = 0; i < data.childNode.conditionNodes.length; i++) {
						if (data.childNode.conditionNodes[i].error) {
							this.tipList.push({ name: data.childNode.conditionNodes[i].nodeName, type: "条件" })
						}
						this.reErr(data.childNode.conditionNodes[i])
					}
				}
			} else {
				data.childNode = null
			}
		},
		saveSet() {
			this.isTried = true;
			this.tipList = [];
			this.reErr(this.nodeConfig);
			if (this.tipList.length != 0) {
				this.tipVisible = true;
				return;
			}
			this.processConfig.flowPermission = this.flowPermission
      this.$confirm('是否保存已编辑的流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true;
        addFlow(this.processConfig).then(res=>{
          if (res.code===200){
              this.fullscreenLoading = false;
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        });
      });
		},
		zoomSize(type) {
			if (type == 1) {
				if (this.nowVal == 50) {
					return;
				}
				this.nowVal -= 10;
			} else {
				if (this.nowVal == 300) {
					return;
				}
				this.nowVal += 10;
			}
		},
	}
};
</script>

<style scoped>
  @import "~@/assets/flow_styles/workflow.scss";
  @import "~@/assets/flow_styles/override-element-ui.scss";
  .error-modal-list {
    width: 455px;
  }
</style>



